class box extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      open: true,
      hidden: false,
      only: true
    }

    this.boxClick = this.boxClick.bind(this)
  }

  boxClick(E) {
    if (E.target.nodeName === 'I') {
      let name = E.target.dataset.target;
      switch (name) {
        case 'minus':
          this.setState({
            open: !this.state.open
          })
          break;
        case 'remove':
          this.setState({
            hidden: true
          })
          break;
        default:
      }
    }
  }

  componentDidMount(){
  }

  render() {
    return (
      <div className={this.state.hidden ? 'box box-close' : 'box'}>
        <header className="box-header">
          <h3>{this.props.title}</h3>
          <div onClick={this.boxClick}>
            <i data-target="minus" className={this.state.open ? 'glyphicon glyphicon-minus' : "glyphicon glyphicon-remove rotate-45"}></i>
            <i data-target="remove" className="glyphicon glyphicon-remove"></i>
          </div>
        </header>
        <div className={this.state.open ? "box-body" : "box-body body-close"}>
            {this.props.children}
        </div>
      </div>
    )
  }
}

module.exports = box;
